﻿<MCard>
    <MToolbar Color="purple"
              Dark
              Flat
              Prominent>
        <ChildContent>
            <MTextField
                AppendIcon="mdi-microphone"
                Class="mx-4"
                Flat
                HideDetails="@true"
                Label="Search"
                PrependInnerIcon="mdi-magnify"
                TValue="string"
                SoloInverted>
            </MTextField>
        </ChildContent>

        <ExtensionContent>
            <MTabs
                @bind-Value="tab"
                Centered>
                @foreach (var item in Enumerable.Range(1, 3))
                {
                    <MTab>
                        Item @item
                    </MTab>
                }
            </MTabs>
        </ExtensionContent>
    </MToolbar>

    <MTabsItems @bind-Value="tab">
        <MTabItem>
            <MCard Flat>
                <MCardText>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </MCardText>
            </MCard>
        </MTabItem>
        <MTabItem>
            <MCard Flat>
                <MCardTitle Class="text-h5">
                    An awesome title
                </MCardTitle>
                <MCardText>
                    <p>
                        Duis lobortis massa imperdiet quam. Donec vitae orci sed dolor rutrum auctor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Praesent congue erat at massa.
                    </p>

                    <p>
                        Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Etiam sit amet orci eget eros faucibus tincidunt. Donec sodales sagittis magna.
                    </p>

                    <p class="mb-0">
                        Ut leo. Suspendisse potenti. Duis vel nibh at velit scelerisque suscipit. Fusce pharetra convallis urna.
                    </p>
                </MCardText>
            </MCard>
        </MTabItem>
        <MTabItem>
            <MCard Flat>
                <MCardTitle Class="text-h5">
                    An even better title
                </MCardTitle>
                <MCardText>
                    <p>
                        Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed hendrerit. Maecenas malesuada. Vestibulum ullamcorper mauris at ligula. Proin faucibus arcu quis ante.
                    </p>

                    <p class="mb-0">
                        Etiam vitae tortor. Curabitur ullamcorper ultricies nisi. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Aliquam lobortis. Suspendisse potenti.
                    </p>
                </MCardText>
            </MCard>
        </MTabItem>
    </MTabsItems>
</MCard>

@code {

    StringNumber tab;
}